<template>
  <div id="reportStackChart" :style="{ width, height }"></div>
</template>

<script setup lang="ts">
import type { ResultInModule } from "@/types/SunnyResultDetail/type";
import { init, type EChartsType } from "echarts";
import { onMounted, onUnmounted } from "vue";
import { nextTick } from "vue";
import { useChartStore } from "@/stores/chartStore";
import { computed, ref } from "vue";

const chartStore = useChartStore();

let chart: EChartsType;

const props = defineProps({
  width: { type: String, default: "100%" },
  height: { type: String, default: "300px" },
  chartData: {
    type: Object as () => ResultInModule,
    required: true,
  },
});

const passCount = computed(() => {
  let passCasesArray: number[] = [];
  let keys = Object.keys(props.chartData);
  keys.forEach((key) => {
    passCasesArray.push(
      props.chartData[key].filter((sunnyResult) => {
        return sunnyResult.status === "PASS";
      }).length
    );
  });
  return passCasesArray;
});

const failCount = computed(() => {
  let failCasesArray: number[] = [];
  Object.values(props.chartData).forEach((value) => {
    failCasesArray.push(
      value.filter((sunnyResult) => {
        return sunnyResult.status === "FAIL";
      }).length
    );
  });
  return failCasesArray;
});

const skippedCount = computed(() => {
  let skippedCasesArray: number[] = [];
  Object.values(props.chartData).forEach((value) => {
    skippedCasesArray.push(
      value.filter((sunnyResult) => {
        return sunnyResult.status === "SKIPPED";
      }).length
    );
  });
  return skippedCasesArray;
});

onMounted(() => {
  //防止div还没加载的时候就开始去进行chart的初始化，等到vue完成一个tick的HTML元素更新之后再进行操作。
  nextTick(() => {
    initChart();
  }).then(() => {
    if (chart) chartStore.listenResize(chart);
  });
});

/**
 * 完成事件的解绑
 */
onUnmounted(() => {
  if (chart) {
    chartStore.removeListener(chart);
  }
});

function initChart() {
  chart = init(document.getElementById("reportStackChart") as HTMLDivElement);
  chart.setOption({
    title: {
      show: true,
      text: "模块运行情况",
      textStyle: {
        fontSize: 20,
        color: "#409EFF",
        fontWeight: "bold",
      },
      textAlign: "center",
      left: "50%",
      padding: 5,
    },

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        shadowStyle: {
          opacity: 0.8,
        },
      },
    },
    legend: {
      top: "bottom",
      left: "center",
    },
    xAxis: [
      {
        type: "category",
        data: Object.keys(props.chartData),
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "用例数（条）",
        min: 0,
        interval: 1,
        axisLabel: {
          formatter: "{value} 条",
        },
      },
    ],
    series: [
      {
        name: "用例通过数",
        type: "bar",
        stack: "用例数",
        //配置显示在tooltip弹窗中的内容
        tooltip: {
          valueFormatter: function (value: any) {
            return value + " 条";
          },
        },
        itemStyle: {
          color: "rgb(145 204 117)",
        },
        data: passCount.value,
      },
      {
        name: "用例跳过数",
        type: "bar",
        stack: "用例数",
        tooltip: {
          valueFormatter: function (value: any) {
            return value + " 条";
          },
        },
        itemStyle: {
          color: "rgb(250 200 88)",
        },
        data: skippedCount.value,
      },
      {
        name: "用例失败数",
        type: "bar",
        stack: "用例数",
        tooltip: {
          valueFormatter: function (value: any) {
            return value + " 条";
          },
        },
        itemStyle: {
          color: "rgb(238 102 102)",
        },
        data: failCount.value,
      },
    ],
  });
}
</script>
